<template>
  <div class="details">
    <el-collapse>
      <el-collapse-item>
        <template slot="title">
          <div style="width: 100%; text-align: center">项目公告</div>
        </template>
        <div>{{ proNotice }}</div>
      </el-collapse-item>
    </el-collapse>
    <div
      class="header"
      style="font-size: 18px; margin: 15px 0px; font-weight: normal"
    >
      <span style="overflow: hidden; display: inline-block">项目名称: </span>
      <span style="overflow: hidden; display: inline-block">【</span>
      <el-tooltip effect="dark" :content="form.proName" placement="top">
        <span
          style="
            font-weight: bold;
            white-space: nowrap;
            max-width: 200px;
            overflow: hidden;
            display: inline-block;
            text-overflow: ellipsis;
          "
        >
          {{ form.proName }}
        </span>
      </el-tooltip>
      <span style="overflow: hidden; display: inline-block">】</span>

      <el-link type="primary" @click="editProNameButton" icon="el-icon-edit">
      </el-link>

      <span style="margin-left: 25px; overflow: hidden; display: inline-block">
        合同编号:
      </span>
      <span style="overflow: hidden; display: inline-block">【</span>
      <el-tooltip
        effect="dark"
        :content="form.contractCode"
        placement="top"
      >
        <span
          style="
            font-weight: bold;
            white-space: nowrap;
            max-width: 200px;
            overflow: hidden;
            display: inline-block;
            text-overflow: ellipsis;
          "
          >{{ form.contractCode }}</span
        >
      </el-tooltip>
      <span style="overflow: hidden; display: inline-block">】</span>

      <el-link
        type="primary"
        @click="editProContractCodeButton"
        icon="el-icon-edit"
      >
      </el-link>

      <span
        style="
          margin-left: 25px;
          margin-right: 15px;
          overflow: hidden;
          display: inline-block;
        "
        >优先级:</span
      >
      <span
        class="priority"
        style="
          background-color: lightgrey;
          font-weight: bold;
          overflow: hidden;
          display: inline-block;
        "
        >{{
          form.proPriority == 1 ? "高" : form.proPriority == 2 ? "中" : "低"
        }}</span
      >
    </div>
    <div class="message" style="line-height: 45px">
      <div>
        <i class="el-icon-time">项目周期：</i>
        <span class="time"> {{ zhouQiStart }}~{{ zhouQiEnd }}</span
        ><!--项目周期 -->
      </div>
      <div>
        <i class="el-icon-user">创建人：</i>
        <span class="name">{{ form.createUserName }}</span>
      </div>
      <div>
        <i class="el-icon-user">当前负责人：</i>
        <span class="name">{{
          form.proManagerName ? form.proManagerName : "等待流转负责人"
        }}</span>
        <span style="margin-left: 10px; font-size: 13px; color: lightgrey">{{
          form.proStatus == 1 || form.proStatus == 2 ? "[待流转]" : null
        }}</span>
      </div>
    </div>

    <div class="container">
      <div class="progress">
        <div class="progress_title">项目进度：</div>
        <div class="progress_content">
          <div class="centerElRow">
            <div
              v-for="(item, index) in nodeTypeList"
              :key="index"
              :span="3"
              class="center"
            >
              <div
                class="xianLeft"
                :style="index == 0 ? 'display: none' : ''"
              ></div>
              <div
                style="display: flex; flex-direction: row"
                v-if="!item.current"
              >
                <div class="dian" :style="index == 0 ? 'margin-left: 0' : ''">
                  {{ index + 1 }}
                </div>
                <div class="notSelected">
                  <ellipsis :length="20" tooltip>
                    {{ nodeTypeList[index] && nodeTypeList[index].nodeName }}
                  </ellipsis>
                </div>
              </div>

              <el-popover
                v-if="item.current"
                trigger="hover"
                placement="bottom"
              >
                  <div style="line-height: 25px">
                      <div style="margin-top: 10px;display: flex">
                          <div class="pro-progress-div">计划完成日期：</div>{{ zhouQiEnd }}
                      </div>
                      <div style="display: flex">
                          <div class="pro-progress-div" >项目实际投入总人天：</div>{{ info.projectSumRealityDay }}
                      </div>
                      <div style="display: flex">
                          <div class="pro-progress-div">项目总投入人力：</div>{{info.proAssignmentList ? info.proAssignmentList.length : 0 }}个
                      </div>
                      <div style="display: flex">
                          <div class="pro-progress-div">项目总持续时间：</div>{{ form.workDate }}个工作日
                      </div>
                  </div>
                <div
                  style="display: flex; flex-direction: row"
                  slot="reference"
                >
                  <div
                    class="dian"
                    :style="
                      index == 0
                        ? 'margin-left: 0;border: 1px solid #1890FF;color: #409EFF'
                        : 'border: 1px solid #1890FF;color: #409EFF;'
                    "
                  >
                    {{ index + 1 }}
                  </div>
                  <div class="selectedItem">
                    <ellipsis :length="20" tooltip>
                      {{ nodeTypeList[index] && nodeTypeList[index].nodeName }}
                    </ellipsis>
                  </div>
                </div>
              </el-popover>
              <div
                :style="
                  index == nodeTypeList.length - 1 ? 'visibility: hidden' : ''
                "
                class="xianRight"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="statusBox">
        <div class="status_title" style="line-height: 32px">项目状态：</div>
        <!--            {{info.projectSchedule}}-->
        <div class="status_content">
          <div
            v-for="(item, index) in statusData"
            :class="{
              noProgress:
              item == '暂无进度' && info.projectSchedule == '暂无进度',
              normal: item == '如期正常' && info.projectSchedule == '如期正常',
              delay: item == '项目延期' && info.projectSchedule == '项目延期',
              warning: item == '严重延期' && info.projectSchedule == '严重延期',
              advance: item == '项目超前' && info.projectSchedule == '项目超前',
              sharpAdvance:
                item == '大幅超前' && info.projectSchedule == '大幅超前',
            }"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="estimate">
          预估人天：<span class="estimate_value"
            >{{ info.projectSumPlanDay ? info.projectSumPlanDay : 0 }}人天</span
          >
        </div>
        <div class="practical">
<!--          项目投入总人天：-->
            项目实际投入总人天：
            {{
            info.projectSumRealityDay ? info.projectSumRealityDay : 0
            }}人天
        </div>
      </div>
      <div class="progressMessage">
        <div class="progressMessage_title">项目研发进度：</div>
        <div
          class="progressMessage_content"
          style="display: flex; align-items: center"
        >
          <div style="width: 400px" v-if="tableData.length">
            <el-progress :percentage="Number(info.progress)"></el-progress>
          </div>
          <span v-else>暂无进度显示</span>
        </div>
      </div>
    </div>

    <div
      class="footer"
      v-if="!tableData.length"
      style="text-align: center; margin:90px 0; "
    >
      等待流转人分配中……
    </div>

    <div v-else class="footer" style="margin-top: 70px">
      <div style="justify-content: space-between; display: flex">
        <div>
          <span> 视图单位：</span>
          <el-radio-group v-model="dayRadio">
            <el-radio :label="3">天</el-radio>
            <el-radio :label="6">周</el-radio>
            <el-radio :label="9">月</el-radio>
          </el-radio-group>
        </div>
        <span class="checkbox-span">
          <el-checkbox-group @change="checkboxChange()" v-model="checkList">
            <span class="checkbox-span-1">
              <el-checkbox label="显示正常"></el-checkbox>
            </span>
            <span class="checkbox-span-2" style="margin: 0px 20px">
              <el-checkbox label="显示延期"></el-checkbox>
            </span>
            <span class="checkbox-span-3" >
              <el-checkbox label="显示提前"></el-checkbox>
            </span>
          </el-checkbox-group>
        </span>

      </div>
      <!--        天-->
      <el-table
        :header-cell-style="tableHeaderStyle"
        max-height="650"
        v-show="dayRadio == 3"
        class="table"
        :data="tableData"
        :span-method="objectSpanMethodA"
        border
        :cell-style="cellStyle"
        cell-class-name="tdFather"
        style="width: 100%; margin-top: 20px; text-align: center"
      >
          <el-table-column
            min-width="100"
            fixed
            label="统计">
            <template>
              <div>
                <b>预估</b>
                <div style="color: #aaaaaa">{{ info.projectSumPlanDay ? info.projectSumPlanDay : 0 }}人天</div>
              </div>
              <div  style="margin-top: 15px">
                <b>绩效</b>
                <div style="color: #aaaaaa">{{info.currentSumPerformanceDaily ? info.currentSumPerformanceDaily : 0}}人天</div>
              </div>


            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="项目角色"
            width="120"
            :show-overflow-tooltip="true"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="人员"
            :show-overflow-tooltip="true"
            width="120"
            fixed
          >
          </el-table-column>
          <el-table-column prop="all" label="累计投入" width="120" fixed>
          </el-table-column>

        <el-table-column v-for="(item,index) in nodeTypeList" :key="index" :label="item.nodeName">
          <el-table-column
              v-for="(t, i) in item.proDateInfoList"
              :key="i"
              :label="dateReplace(t.workDate)"
              width="120"
          >
            <template slot-scope="scope">
              <!--            #7FFF00绿色#FF9900橙色 FF0033 红色 #63B8FF 蓝色-->
              <div
                  :style="{
                  background:
                    scope.row[dateReplace(t.workDate) + 'statu'] == 1 &&scope.row[dateReplace(t.workDate)] &&checkList.includes('显示正常')? '#B5F1A9':
                    scope.row[dateReplace(t.workDate) + 'statu'] == 2 &&scope.row[dateReplace(t.workDate)] &&checkList.includes('显示延期')? '#FFAC74':
                    scope.row[dateReplace(t.workDate) + 'statu'] == 3 &&scope.row[dateReplace(t.workDate)] &&checkList.includes('显示提前')? '#71E6CB': '',
                    height: '47px',lineHeight: '47px',
                    color:
                    scope.row[dateReplace(t.workDate) + 'statu'] == 1 &&scope.row[dateReplace(t.workDate)] &&checkList.includes('显示正常')? '#fff':
                    scope.row[dateReplace(t.workDate) + 'statu'] == 2 &&scope.row[dateReplace(t.workDate)] &&checkList.includes('显示延期')? '#fff':
                    scope.row[dateReplace(t.workDate) + 'statu'] == 3 &&scope.row[dateReplace(t.workDate)] &&checkList.includes('显示提前')? '#fff': '',}">
                {{ scope.row[dateReplace(t.workDate)] }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>

      </el-table>

      <!--        周-->
      <el-table
        :header-cell-style="tableHeaderStyle"
        max-height="650"
        v-show="dayRadio == 6"
        class="table"
        :data="weekArr"
        :span-method="objectSpanMethod"
        border
        cell-class-name="tdFather"
        style="width: 100%; margin-top: 20px; text-align: center"
      >
        <el-table-column prop="type" label="项目角色" width="120" fixed>
        </el-table-column>
        <el-table-column prop="name" label="人员" width="120" fixed>
        </el-table-column>
        <el-table-column prop="all" label="累计投入" width="120" fixed>
        </el-table-column>

        <el-table-column
          v-for="(item, index) in weekTimelist"
          :key="index"
          :label="item"
          width="120"
        >
          <template slot-scope="scope">
            <div
                @click="test(scope.row)"
                :style="{
                background:
                  scope.row['statu' + index] == 1 &&scope.row['time' + index] &&checkList.includes('显示正常')? '#B5F1A9':
                  scope.row['statu' + index] == 2 &&scope.row['time' + index] &&checkList.includes('显示延期')? '#FFAC74':
                  scope.row['statu' + index] == 3 &&scope.row['time' + index] &&checkList.includes('显示提前')? '#71E6CB': '',
                  height: '47px',lineHeight: '47px',
                  color:
                  scope.row['statu' + index] == 1 &&scope.row['time' + index] &&checkList.includes('显示正常')? '#fff':
                  scope.row['statu' + index] == 2 &&scope.row['time' + index] &&checkList.includes('显示延期')? '#fff':
                  scope.row['statu' + index] == 3 &&scope.row['time' + index] &&checkList.includes('显示提前')? '#fff': '',}">
              {{ scope.row["time" + index] ? scope.row["time" + index] : "" }}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--        月-->
      <el-table
        :header-cell-style="tableHeaderStyle"
        max-height="650"
        v-show="dayRadio == 9"
        class="table"
        :data="monthArr"
        :span-method="objectSpanMethod"
        border
        cell-class-name="tdFather"
        style="width: 100%; margin-top: 20px; text-align: center"
      >
        <el-table-column prop="type" label="项目角色" width="120" fixed>
        </el-table-column>
        <el-table-column prop="name" label="人员" width="120" fixed>
        </el-table-column>
        <el-table-column prop="all" label="累计投入" width="120" fixed>
        </el-table-column>

        <el-table-column
          v-for="(item, index) in monthTimeList"
          :key="index"
          :label="item"
          width="120"
        >
          <template slot-scope="scope">
            <div
              @click="test(scope.row)"
              :style="{
                background:
                  scope.row['statu' + index] == 1 &&scope.row['time' + index] &&checkList.includes('显示正常')? '#B5F1A9':
                  scope.row['statu' + index] == 2 &&scope.row['time' + index] &&checkList.includes('显示延期')? '#FFAC74':
                  scope.row['statu' + index] == 3 &&scope.row['time' + index] &&checkList.includes('显示提前')? '#71E6CB': '',
                  height: '47px',lineHeight: '47px',
                  color:
                  scope.row['statu' + index] == 1 &&scope.row['time' + index] &&checkList.includes('显示正常')? '#fff':
                  scope.row['statu' + index] == 2 &&scope.row['time' + index] &&checkList.includes('显示延期')? '#fff':
                  scope.row['statu' + index] == 3 &&checkList.includes('显示提前')? '#fff': '',}">
              {{ scope.row["time" + index] ? scope.row["time" + index] : "" }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--      修改项目名称-->
    <el-dialog
      title="修改项目名称"
      :visible.sync="edit_dialog_proName"
      width="500px"
    >
      <el-form
        :model="project"
        ref="edit_proName"
        label-width="120px"
        :key="edit_key"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item
          label="项目名称："
          prop="proName"
          :rules="[
            { required: true, message: '请输入项目名称' },
            { min: 0, max: 200, message: '最多200个字符', trigger: 'blur' },
          ]"
        >
          <el-input
            type="age"
            v-model.trim="project.proName"
            @input.native="trimLR"
            placeholder="请输入项目名称"
            maxLength="200"
            autocomplete="off"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelButton">取 消</el-button>
        <el-button type="primary" @click="submitEditProName('edit_proName')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!--      修改合同编号-->
    <el-dialog
      title="修改合同编号"
      :visible.sync="edit_dialog_contractCode"
      width="500px"
    >
      <el-form
        :model="project"
        ref="edit_contractCode"
        label-width="120px"
        :key="edit_key"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item
          required
          label="合同编号："
          prop="contractCode"
          :rules="[
            { required: true, message: '请输入合同编号' },
            { min: 0, max: 50, message: '最多50个字符', trigger: 'blur' },
          ]"
        >
          <el-input
            type="age"
            v-model.trim="project.contractCode"
            maxLength="50"
            placeholder="请输入合同编号"
            autocomplete="off"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelButton">取 消</el-button>
        <el-button
          type="primary"
          @click="submitEditContractCode('edit_contractCode')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ellipsis from "@/components/Ellipsis";
import { tableHeaderStyle } from "@/utils/constant";
import { http_workDay } from "@/api/projectChanges";
import moment from "moment";
import {
  http_createObject_nodeType,
  http_createObject_userList,
  http_createObject_editProjectInit,
  http_createObject_getProjectInfo,
  http_project_updateContractCode,
} from "@/api/createObject";
import { Message } from "element-ui";
export default {
  components: {
    ellipsis,
  },
  data() {
    return {
      tableHeaderStyle: tableHeaderStyle,
      activeNames: ["1"],
      form: { proName: "" },
      info: {},
      dayRadio: 3,
      checkList: [],
      statusData: [
        "暂无进度",
        "如期正常",
        "项目延期",
        "严重延期",
        "项目超前",
        "大幅超前",
      ],
      percentage: 0,
      timeList: [],
      tableData: [],
      zhouQiStart: "",
      zhouQiEnd: "",
      nodeTypeList: [],
      managerName: "",
      weekArr: [],
      weekTimelist: [],
      monthArr: [],
      monthTimeList: [],
      proNotice: null,
      edit_key: new Date().getTime(),
      edit_dialog_proName: false,
      edit_dialog_contractCode: false,
      project: {
        proName: null,
        contractCode: null,
      },
      inputHoursAllSum: 0,
      personSumRealityAllSum: 0,
    };
  },
  mounted() {
    this.getEditProjectInit();
    // this.getProjectInfo()
  },
  methods: {
    trimLR() {
            this.project.proName = this.project.proName.replace(/^\s*|(\s*$)/g,"")
    },
    handleChange(val) {
    },
    // 获取初始数据
    getEditProjectInit() {
      http_createObject_editProjectInit({ id: this.$route.query.id }).then(
        (res) => {
          if (res.success) {
            // 项目类型Id

            for (var p in res.data) {
              this.form[p] = res.data[p];
            }
            this.form.proTypeId = this.form.proTypeId + "";
            this.zhouQiStart = res.data.proStartDay;
            this.zhouQiEnd = res.data.proEndday;
            this.timeListFn(this.zhouQiStart, this.zhouQiEnd);
            this.nodeTypeList = res.data.proNodeList;
            // this.getUserLsit()
          } else {
            this.$message(res.message);
          }
        }
      );
    },
    // 根据类型获取项目初始节点
    getNodeType() {
      http_createObject_nodeType({ typeId: this.form.proTypeId }).then(
        (res) => {
          if (res.success) {
            res.data.forEach((item, index) => {
              this.nodeTypeList[index] = Object.assign(
                {},
                item,
                this.nodeTypeList[index]
              );
              this.nodeTypeList[index].nodeName = res.data[index].nodeName;
            });
            this.getProjectInfo();
          } else {
            this.$message(res.message);
          }
        }
      );
    },
    getProjectInfo() {
      var arr = [];
      http_createObject_getProjectInfo({ id: this.$route.query.id }).then(
        (res) => {
          for (var p in res.data) {
            this.info[p] = res.data[p];
          }
          // 项目进度
          if (this.info.projectSumRealityDay && this.info.projectSumPlanDay) {
            this.percentage =
              this.info.projectSumRealityDay / this.info.projectSumPlanDay;
          }
          this.proNotice = res.data.proNotice;
          // 天
          let inputHoursAll = []
          let personSumRealityAll = []
          this.proAssignmentListLength = res.data.proAssignmentList.length
          // console.log('this.proAssignmentListLength:',this.proAssignmentListLength )
          res.data.proAssignmentList.forEach((item, index) => {
            item.planHoursList.forEach((m,i)=>{
              inputHoursAll.push(Number(m.inputHours))
              personSumRealityAll.push(Number(m.personSumReality))
            })
            // 实际
            var obj1 = {
              all: 0,
              statu: 0,
            };
            // 计划
            var obj2 = {
              all: 0,
              statu: 0,
            };
            obj1.type = item.proroleName;
            obj1.name = item.userName;
            obj2.type = item.proroleName;
            obj2.name = item.userName;
            item.planHoursList.some((it, ind) => {
              var string = it.planDate.replace("-", ".").replace("-", ".");
              obj1[string] = it.personSumReality ? (it.personSumReality * 1).toFixed(2) : "";
              obj1.all += it.personSumReality * 1;
              obj2[string] = it.inputHours ? (it.inputHours * 1).toFixed(2) : "";
              obj2.all += it.inputHours * 1;
              if (it.inputHours && it.personSumReality) {
                if (new Date(new Date(string).toLocaleDateString()).getTime() < new Date(new Date().toLocaleDateString()).getTime()) {
                  if (Number(it.inputHours) > Number(it.personSumReality)) {
                    obj1[string + "statu"] = 2;
                    obj2[string + "statu"] = 2;
                  } else if (Number(it.inputHours) < Number(it.personSumReality)) {
                    obj1[string + "statu"] = 3;
                    obj2[string + "statu"] = 3;
                  } else {
                    obj1[string + "statu"] = 1;
                    obj2[string + "statu"] = 1;
                  }
                }
              }
            });
            arr.push(obj2);
            arr.push(obj1);
          });
          this.inputHoursAllSum = Number(eval(inputHoursAll.join("+"))).toFixed(2)
          this.personSumRealityAllSum = Number(eval(personSumRealityAll.join("+"))).toFixed(2)
          // console.log('inputHoursAll',this.inputHoursAllSum,'personSumRealityAll',this.personSumRealityAllSum)
          arr.forEach((item, index) => {
            item.all = item.all.toFixed(2);
          });
          this.tableData = arr;

          // 周
          // let today1 = new Date("2020.12.01").toLocaleDateString();
          // let today2 = new Date().toLocaleDateString();
          var start = 8 - (new Date(res.data.proStartDay).getDay() != 0 ? new Date(res.data.proStartDay).getDay() : 7);
          // var start = 7 - new Date(res.data.proStartDay).getDay()
          var flag = 0;
          var weekArr = [];
          var sliceArr = [];
          var sliceArrChild = [];
          while (true) {
            if (flag == 0) {
              sliceArrChild = this.timeList.slice(0, start);
              sliceArr.push(sliceArrChild);
              flag += 1;
            } else if (this.timeList.length < start) {
              break;
            } else {
              sliceArrChild = this.timeList.slice(start, start + 7);
              if(sliceArrChild != null && sliceArrChild.length != 0){
                  sliceArr.push(sliceArrChild);
              }
              start += 7;
            }
          }
          sliceArr.forEach((item, index) => {
            this.weekTimelist.push(item[0] + "~" + item[item.length - 1]);
          });
          let currentWeekIndex = [];
          sliceArr.forEach((days, index) => {
            days.forEach((d) => {
              if (new Date(new Date(d).toLocaleDateString()).getTime() <= new Date(new Date().toLocaleDateString()).getTime()) {
                currentWeekIndex.push(index);
              }
            });
          });
          currentWeekIndex = Array.from(new Set(currentWeekIndex));
          res.data.proAssignmentList.forEach((a, b) => {
            var weekObj1 = {};
            var weekObj2 = {};
            sliceArr.forEach((item, index) => {
              weekObj1["time" + index] = 0;
              weekObj2["time" + index] = 0;
              weekObj1["statu" + index] = 0;
              weekObj2["statu" + index] = 0;
            });
            weekObj1.type = a.proroleName;
            weekObj1.name = a.userName;
            weekObj2.type = a.proroleName;
            weekObj2.name = a.userName;
            a.planHoursList.some((c, d) => {
              var date = c.planDate.replace("-", ".").replace("-", ".");
              sliceArr.forEach((item, index) => {
                item.some((it, ind) => {
                  if (date == it) {
                    weekObj2["time" + index] = Number(weekObj2["time" + index]) + Number(c.inputHours * 1);
                    weekObj1["time" + index] = Number( weekObj1["time" + index]) + Number(c.personSumReality * 1);
                    // 判断  超前还是落后
                    if (currentWeekIndex.indexOf(index) != -1) {
                      if (weekObj1["time" + index] < weekObj2["time" + index]) {
                        weekObj2["statu" + index] = 2;
                        weekObj1["statu" + index] = 2;
                      } else if (weekObj1["time" + index] > weekObj2["time" + index]) {
                        weekObj2["statu" + index] = 3;
                        weekObj1["statu" + index] = 3;
                      } else {
                        weekObj2["statu" + index] = 1;
                        weekObj1["statu" + index] = 1;
                      }
                      if (weekObj1["time" + index] == 0) {
                        weekObj1["time" + index] = '0.00'
                      }
                    }
                  }
                });
              });
            });
            weekArr.push(weekObj2);
            weekArr.push(weekObj1);
          });
          weekArr.forEach((item, index) => {
            item.all = this.tableData[index].all;
            Object.keys(item).some((it) => {
              Number(item[it]) ? (item[it] = (item[it] * 1).toFixed(2)) : item[it];
            });
          });
          this.weekArr = weekArr;


          // 月
          var monthArr = [];
          // = JSON.parse(JSON.stringify(this.timeList))
          let currentMonthBefores = [];
          var monthList = this.timeList.map((item, index) => {
            if (
              new Date(item).toLocaleDateString() <=
              new Date().toLocaleDateString()
            ) {
              currentMonthBefores.push(item.substring(0, 7));
            }
            return item.substring(0, 7);
          });
          currentMonthBefores = Array.from(new Set(currentMonthBefores));

          monthList = Array.from(new Set(monthList));
          this.monthTimeList = monthList;

          let currentMonthBeforeIndex = [];
          this.monthTimeList.forEach((item, index) => {
            if (currentMonthBefores.indexOf(item) != -1) {
              currentMonthBeforeIndex.push(index);
            }
          });
          // console.log("currentMonthBeforeIndex",currentMonthBeforeIndex)

          res.data.proAssignmentList.forEach((a, b) => {
            var monthObj1 = {};
            var monthObj2 = {};
            monthList.forEach((item, index) => {
              monthObj1["time" + index] = 0;
              monthObj2["time" + index] = 0;
              monthObj1["statu" + index] = 0;
              monthObj2["statu" + index] = 0;
            });
            monthObj1.type = a.proroleName;
            monthObj1.name = a.userName;
            monthObj2.type = a.proroleName;
            monthObj2.name = a.userName;
            a.planHoursList.some((c, d) => {
              var date = c.planDate.replace("-", ".").replace("-", ".");
              monthList.forEach((item, index) => {
                if (date.includes(item)) {
                  monthObj2["time" + index] = Number(monthObj2["time" + index])+Number(c.inputHours * 1);
                  monthObj1["time" + index] = Number( monthObj1["time" + index])+Number(c.personSumReality * 1);
                  // if(c.inputHours && c.personSumReality){
                  if (currentMonthBeforeIndex.indexOf(index) != -1) {
                    if (monthObj1["time" + index] < monthObj2["time" + index]) {
                      monthObj2["statu" + index] = 2;
                      monthObj1["statu" + index] = 2;
                    } else if (monthObj1["time" + index] > monthObj2["time" + index]) {
                      monthObj2["statu" + index] = 3;
                      monthObj1["statu" + index] = 3;
                    } else {
                      monthObj2["statu" + index] = 1;
                      monthObj1["statu" + index] = 1;
                    }
                    if (monthObj1["time" + index] == 0) {
                      monthObj1["time" + index] = '0.00'
                    }
                  }
                  // }
                }
              });
            });
            monthArr.push(monthObj2);
            monthArr.push(monthObj1);
          });
          // console.log("monthArr",monthArr)
          monthArr.forEach((item, index) => {
            item.all = this.tableData[index].all;
            Object.keys(item).some((it) => {
              Number(item[it]) ? (item[it] = (item[it] * 1).toFixed(2)) : item[it];
            });
          });
          this.monthArr = monthArr;
        }
      );
    },

    async timeListFn(start, end) {
      const params = {
        beginDate: start,
        endDate: end,
      };
      const res = await http_workDay(params);
      const arr = [];
      res.data.map((item) =>
        arr.push(moment(Object.keys(item)[0]).format("YYYY.MM.DD"))
      );
      this.timeList = arr;
      this.getNodeType();
    },
    // 项目负责人列表
    getUserLsit() {
      http_createObject_userList({}).then((res) => {
        if (res.success) {
          res.data.records.forEach((item, index) => {
            if (this.form.proManager == item.userId)
              this.form.managerName = item.userName;
          });
        } else {
          this.$message(res.message);
        }
      });
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    checkboxChange() {
    },
    objectSpanMethodA({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0){
        if (rowIndex % (this.proAssignmentListLength*2) === 0) {
          return {
            rowspan: (this.proAssignmentListLength*2),
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      if (columnIndex === 1 || columnIndex === 2) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
      objectSpanMethod({ row, column, rowIndex, columnIndex }){
          if (columnIndex === 0 || columnIndex === 1) {
              if (rowIndex % 2 === 0) {
                  return {
                      rowspan: 2,
                      colspan: 1,
                  };
              } else {
                  return {
                      rowspan: 0,
                      colspan: 0,
                  };
              }
          }
      },
    getProjectBulletin() {
      document.getElementById("div2").style.display = "none";
      document.getElementById("div").style.display = null;
    },
    closeProjectBulletin() {
      document.getElementById("div").style.display = "none";
      document.getElementById("div2").style.display = null;
    },
    editProNameButton() {
      this.project = {};
      this.edit_key = new Date().getTime();
      this.edit_dialog_proName = true;
    },
    editProContractCodeButton() {
      this.project = {};
      this.edit_key = new Date().getTime();
      this.edit_dialog_contractCode = true;
    },
    cancelButton() {
      this.project = {};
      this.edit_dialog_proName = false;
      this.edit_dialog_contractCode = false;
    },
    http_edit_proName(proName, contractCode) {
      let id = this.$route.query.id;
      let params = {
        id: id,
        proName: proName,
        contractCode: contractCode,
      };
      http_project_updateContractCode(params).then((result) => {
        const { success } = result;
        if (success) {
          this.getEditProjectInit();
          Message.success("修改成功");
        }
      });
    },
    submitEditProName(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.http_edit_proName(this.project.proName, null);
          this.edit_dialog_proName = false;
        } else {
          return false;
        }
      });
    },
    submitEditContractCode(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.http_edit_proName(null, this.project.contractCode);
          this.edit_dialog_contractCode = false;
        } else {
          return false;
        }
      });
    },
    dateReplace(date){
        return date.replaceAll('-','.')
    },
    cellStyle({row, column, rowIndex, columnIndex}){
      if (rowIndex == 0 && columnIndex == 0){
        return 'background: #F8F8F9'
      }
    }

  },
};
</script>

<style lang="scss" scoped>
.details {
  font-size: 14px;
  color: #7f7f7f;

  .header {
    margin: 10px 0px;
    color: #000000;
    font-weight: bold;
    .priority {
      padding: 2px 5px;
      // background: #d7d7d7;
    }
  }

  .message {
    padding: 1%;
    border: 1px solid #ebeef5;
    display: flex;
    font-size: 14px;
    margin: 10px 0;

    div {
      padding-right: 20px;

      i::before {
        padding: 0px 10px;
      }

      .time {
        font-size: 18px;
        font-weight: bold;
        color: #000000;
      }
      .name {
        font-weight: bold;
        color: #000000;
      }
    }
  }

  .container {
    padding: 1%;
    border: 1px solid #ebeef5;
    font-size: 14px;

    .progress {
      display: flex;
      align-items: center;
      .progress_title {
        margin-right: 20px;
        white-space: nowrap;
      }
      .progress_content {
        overflow-x: auto;
        //flex: 1;
        text-align: center;
        color: #7f7f7f;

        .centerElRow {
          display: flex;
          // justify-content: center;
          .center {
            display: flex;
            align-items: center;
            margin: 10px 0px;

            .xianLeft {
              flex: 1;
              border: 1px solid #aaaaaa;
              background: #aaaaaa;
              display: none;
            }

            .dian {
              width: 24px;
              height: 24px;
              border: 1px solid #666666;
              border-radius: 50%;
              margin: 0px 10px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .notSelected {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              white-space: nowrap;
            }
            .selectedItem {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              color: #409eff;
              white-space: nowrap;
            }
            .xianRight {
              width: 40px;
              //flex: 1;
              border: 1px solid #aaaaaa;
              background: #aaaaaa;
            }
          }
        }
      }
    }

    .statusBox {
      .status_title {
        margin-right: 10px;
      }

      .status_content {
        display: flex;
        font-size: 13px;

        div {
          background: rgba(0, 0, 0, 0.04);
          margin: 0 10px;
          padding: 8px 10px;
          // background: #d7d7d7;
          color: #aaaaaa;
          border: 1px solid rgba(0, 0, 0, 0.15);
          border-radius: 4px;
        }
        .active {
        }
        .noProgress {
          background: #ecf5ff;
          border: 1px solid #daedff;
          border-radius: 4px;
          color: #409eff;
        }
        .normal {
          background: #e2ffd5;
          border: 1px solid #b5f1a9;
          border-radius: 4px;
          color: #67d482;
        }
        .delay {
          background: #ffc9a5;
          border: 1px solid #ffac74;
          border-radius: 4px;
          color: #fa6400;
        }
        .warning {
          background: #ffa6a6;
          border: 1px solid #ff5e5e;
          border-radius: 4px;
          color: #e02020;
        }
        .advance {
          background: #c2f3e8;
          border: 1px solid #71e6cb;
          border-radius: 4px;
          color: #00bc90;
        }
        .sharpAdvance {
          background: #93e1e3;
          border: 1px solid #39d6da;
          border-radius: 4px;
          color: #009599;
        }
      }
    }

    .statistics {
      width: 100%;
      margin: 20px 0;
      .estimate {
        .estimate_value {
          display: inline-block;
          margin-left: 20px;
        }
      }
      div {
        //width: 50%;
      }
      .practical {
        margin-left: 200px;
        color: #555555;
        font-size: 14px;
      }
    }

    .progressMessage {
      .progressMessage_content {
        font-size: 14px;
        color: #d7d7d7;
      }
    }
  }

  .container > div {
    display: flex;
    margin: 10px 0;
  }
}
</style>
<style>
.tdFather {
  padding: 0 !important;
}

.tdFather > .cell {
  padding: 0 !important;
  text-align: center;
}

.div1 {
  background-color: #72767b;
  margin: auto;
  display: flex;
  color: white;
  height: 60px;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.div2 {
  background-color: #72767b;
  height: 40px;
  width: 100px;
  margin: auto;
  color: white;
  text-align: center;
  line-height: 40px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
</style>

<style lang="less" scoped>
.el-divider {
  margin: 0px;
}
.proProgress_div {
  white-space: nowrap; /*设置不换行*/
  overflow: hidden; /*设置隐藏*/
  text-overflow: ellipsis; /*设置隐藏部分为省略号*/
  width: 130px;
  text-align: center;
}
.pro-progress-div{
    width: 150px;
    text-align: justify;
    text-align-last: justify;
}
.checkbox-span{
  .checkbox-span-1 {
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #B5F1A9;
      border-color: #B5F1A9;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #B5F1A9;
    }
  }
  .checkbox-span-2 {
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #FFAC74;
      border-color: #FFAC74;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #FFAC74;
    }
  }
  .checkbox-span-3 {
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #71E6CB;
      border-color: #71E6CB;
    }

    /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #71E6CB;
    }
  }
}


</style>
<style lang="less" scoped>
    /deep/.el-progress-bar{
        width: 95%;
    }
</style>

